<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Chat Util</title>
    <link rel="stylesheet" href="css/amazeui.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<script>

</script>
<body>
<div class="box">
    <div class="wechat">

        <div class="sidestrip">
            <div class="am-dropdown" data-am-dropdown>
                <!--头像插件-->
                <div class="own_head am-dropdown-toggle"></div>
                <div class="am-dropdown-content">
                    <div class="own_head_top">
                        <div class="own_head_top_text">
                            <p class="own_name">彭于晏丶plus<img src="images/icon/head.png" alt=""/></p>
                            <p class="own_numb">微信号：jsk8787682</p>
                        </div>
                        <img src="images/own_head.jpg" alt=""/>
                    </div>
                    <div class="own_head_bottom">
                        <p><span>地区</span>江西 九江</p>
                        <div class="own_head_bottom_img">
                            <a href=""><img src="images/icon/head_1.png"/></a>
                            <a href=""><img src="images/icon/head_2.png"/></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--三图标-->
            <div class="sidestrip_icon">
                <a id="si_1" style="background: url(images/icon/head_2_1.png) no-repeat;"></a>
                <a id="si_2"></a>
                <a id="si_3"></a>
            </div>

            <!--底部扩展键-->
            <div id="doc-dropdown-justify-js">
                <div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
                    <div class="sidestrip_bc am-dropdown-toggle"></div>
                    <ul class="am-dropdown-content" style="">
                        <li>
                            <a href="#"
                               data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
                            <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
                                <div class="am-modal-dialog">
                                    <div class="am-modal-hd">Modal 标题
                                        <a href="javascript: void(0)" class="am-close am-close-spin"
                                           data-am-modal-close>&times;</a>
                                    </div>
                                    <div class="am-modal-bd">
                                        Modal 内容。本 Modal 无法通过遮罩层关闭。
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li><a href="#">备份与恢复</a></li>
                        <li><a href="#">设置</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--聊天列表-->
        <div class="middle on">
            <div class="wx_search">
                <input type="text" placeholder="搜索"/>
                <button>+</button>
            </div>
            <div class="office_text">
                <ul class="user_list"></ul>
            </div>
        </div>

        <!--好友列表-->
        <div class="middle">
            <div class="wx_search">
                <input type="text" placeholder="搜索"/>
                <button>+</button>
            </div>
            <div class="office_text">
                <ul class="friends_list">
                    <li>
                        <p>新的朋友</p>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/1.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">新的朋友</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>公众号</p>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/2.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">公众号</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>A</p>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/3.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">彭于晏丶plus</p>
                            </div>
                        </div>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/4.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">陈依依</p>
                            </div>
                        </div>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/5.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">毛毛</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>B</p>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/6.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">苏笑言</p>
                            </div>
                        </div>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/7.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">往事不再提</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>C</p>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/8.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">夏继涛</p>
                            </div>
                        </div>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/9.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">早安无恙</p>
                            </div>
                        </div>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/10.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">王鹏</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>D</p>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/11.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">涨了潮了</p>
                            </div>
                        </div>
                        <div class="friends_box">
                            <div class="user_head"><img src="images/head/12.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">Ktz丶中融资</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!--程序列表-->
        <div class="middle">
            <div class="wx_search">
                <input type="text" placeholder="搜索收藏内容"/>
                <button>+</button>
            </div>
            <div class="office_text">
                <ul class="icon_list">
                    <li class="icon_active">
                        <div class="icon"><img src="images/icon/icon.png" alt=""/></div>
                        <span>全部收藏</span>
                    </li>
                    <li>
                        <div class="icon"><img src="images/icon/icon1.png" alt=""/></div>
                        <span>链接</span>
                    </li>
                    <li>
                        <div class="icon"><img src="images/icon/icon2.png" alt=""/></div>
                        <span>相册</span>
                    </li>
                    <li>
                        <div class="icon"><img src="images/icon/icon3.png" alt=""/></div>
                        <span>笔记</span>
                    </li>
                    <li>
                        <div class="icon"><img src="images/icon/icon4.png" alt=""/></div>
                        <span>文件</span>
                    </li>
                    <li>
                        <div class="icon"><img src="images/icon/icon5.png" alt=""/></div>
                        <span>音乐</span>
                    </li>
                    <li>
                        <div class="icon"><img src="images/icon/icon6.png" alt=""/></div>
                        <span>标签</span>
                    </li>
                </ul>
            </div>
        </div>

        <!--聊天窗口-->
        <div class="talk_window">
            <div class="windows_top">
                <div class="windows_top_box">
                    <span id="friend_nickName">&nbsp;</span>
                    <ul class="window_icon">
                        <li><a href=""><img src="images/icon/icon7.png"/></a></li>
                        <li><a href=""><img src="images/icon/icon8.png"/></a></li>
                        <li><a href=""><img src="images/icon/icon9.png"/></a></li>
                        <li><a href=""><img src="images/icon/icon10.png"/></a></li>
                    </ul>
                    <div class="extend" class="am-btn am-btn-success"
                         data-am-offcanvas="{target: '#doc-oc-demo3'}"></div>
                    <!-- 侧边栏内容 -->
                    <div id="doc-oc-demo3" class="am-offcanvas">
                        <div class="am-offcanvas-bar am-offcanvas-bar-flip">
                            <div class="am-offcanvas-content">
                                <p><a href="http://music.163.com/#/song?id=385554" target="_blank">网易音乐</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--聊天内容-->
            <div class="windows_body">
                <div class="office_text" style="height: 100%;">
                    <ul class="content" id="chatbox">

                    </ul>
                </div>
            </div>

            <div class="windows_input" id="talkbox">
                <div class="input_icon">
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </div>
                <div class="input_box">
                    <textarea name="" rows="" cols="" id="input_box"></textarea>
                    <button id="send" onclick="send()">发送（S）</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/zUI.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/wechat.js"></script>

<script type="text/javascript">

    var chatRecordMap = new Map();

    var currentChatUserId;

    $(function(){
        //windows_body
        initWindowElement();

        //回车发送
        $(document).keydown(function(event){
            if(event.keyCode==13){
                var e = e || event;
                send();
                stopDefaultKey(e)
            }
        });
    });

    function initWindowElement(){
        $(".windows_body").hide();
        $("#talkbox").hide();
        $("#friend_nickName").text("");
        //初始化滚动条
        setScroll();
    }
    function setScroll(){
        $("#chatbox").slimScroll({
            height: "473px",
            wheelStep: 10,
            alwaysVisible: true,
        });
    }

    //三图标
    window.onload = function () {
        function a() {
            var si1 = document.getElementById('si_1');
            var si2 = document.getElementById('si_2');
            var si3 = document.getElementById('si_3');
            si1.onclick = function () {
                si1.style.background = "url(images/icon/head_2_1.png) no-repeat"
                si2.style.background = "";
                si3.style.background = "";
            };
            si2.onclick = function () {
                si2.style.background = "url(images/icon/head_3_1.png) no-repeat"
                si1.style.background = "";
                si3.style.background = "";
            };
            si3.onclick = function () {
                si3.style.background = "url(images/icon/head_4_1.png) no-repeat"
                si1.style.background = "";
                si2.style.background = "";
            };
        };

        function b() {
            var text = document.getElementById('input_box');
            var chat = document.getElementById('chatbox');
            var btn = document.getElementById('send');
            var talk = document.getElementById('talkbox');
            btn.onclick = function () {
                if (text.value == '') {
                    alert('不能发送空消息');
                } else {
                    chat.innerHTML += '<li class="me"><img src="' + 'images/own_head.jpg' + '"><span>' + text.value + '</span></li>';
                    text.value = '';
                    chat.scrollTop = chat.scrollHeight;
                    talk.style.background = "#fff";
                    text.style.background = "#fff";
                }
                ;
            };
        };
        a();
        b();
    };

    var webSocket;
    var meUserId = "";
    window.onload = function () {
        var userId = "";
        while (meUserId == undefined || meUserId == '') {
            meUserId = prompt("输入用户ID : ");
        }
        if ('WebSocket' in window) {
            webSocket = new WebSocket("ws://127.0.0.1:9999/websocket?userId=" + meUserId);
        }
        webSocket.onopen = function () {
            console.log("websocket is open....");
        };
        webSocket.onerror = function (e) {
            console.log("websocket is error")
        };
        webSocket.onmessage = function (payload) {
            console.log("websocket is onmessage : " + payload.data)
            var messagePayload = JSON.parse(payload.data);
            var messageType = messagePayload.messageType;

            //在线列表
            if (messageType == 0) {
                var onLineUserList = messagePayload.data;
                for (var i = 0; i < onLineUserList.length; i++) {
                    var userId = onLineUserList[i];
                    $(".user_list").append('<li class="user_card_li" onclick="clickUserCard(id)" id="user_card_' + userId + '">\n' +
                        '<div class="user_head"><img src="images/head/15.jpg"/></div>\n' +
                        '<div class="user_text"><p class="user_name">' + userId + '</p>\n' +
                        '<p class="user_message">预览消息暂未开发</p></div>\n' +
                        '<div class="user_time">今天</div></li>')

                }
            }
            //上下线通知类型
            if (messageType == 1) {
                var onLineAndOffLineActive = messagePayload.data;
                var type = onLineAndOffLineActive.type;
                var userId = onLineAndOffLineActive.userId;
                //上线
                if (type == '1') {
                    var userCard = $("#user_card_" + userId);
                    console.log(userCard)
                    if (userCard.length == 0) {
                        $(".user_list").append('<li class="user_card_li" onclick="clickUserCard(id)" id="user_card_' + userId + '">\n' +
                            '<div class="user_head"><img src="images/head/15.jpg"/></div>\n' +
                            '<div class="user_text"><p class="user_name">' + userId + '</p>\n' +
                            '<p class="user_message">预览消息暂未开发</p></div>\n' +
                            '<div class="user_time">今天</div></li>')
                    }
                }
                //下线
                if (type == '0') {
                    $("#user_card_" + userId).remove();
                }
            }
            //普通到达消息
            if (messageType == '2') {

                var suff = "user_card_";
                var fromId = messagePayload.from;
                var messageContent = messagePayload.messageContent;

                notify(fromId+"发来一条消息",messageContent);

                var chatRecordOnceBean = {
                    "type":"other",
                    "msg":messageContent,
                    "nickName":fromId
                };

                var chatRecord = chatRecordMap.get(suff + fromId);
                console.log("chatRecord :"+chatRecord);
                if(chatRecord == undefined){
                    chatRecord = [];
                    chatRecord.push(chatRecordOnceBean);
                    chatRecordMap.set(suff + fromId,chatRecord);
                }else{
                    chatRecord.push(chatRecordOnceBean);
                    chatRecordMap.set(suff + fromId,chatRecord);
                }
                if(currentChatUserId == (suff + fromId) ){
                    var talkElement = '<li class="other"><img src="images/head/15.jpg" title="'+fromId+'"><span>'+messageContent+'</span></li>';
                    $("#chatbox").append(talkElement);
                }
            }
        };
    }

    function clickUserCard(id){
        $(".windows_body").show();
        $("#talkbox").show();
        $("#friend_nickName").text(id);

        console.log("用户选中卡片 : "+id);

        $(".user_list li").each(function () {
            $(this).removeClass("user_active");
        });

        $("#"+id).toggleClass("user_active");

        //获取当前消息窗口
        currentChatUserId = id;

        //加载聊天记录
        setChatRecord(id);

    }
    function setChatRecord(id){
        console.log("加载聊天记录 : "+id)
        $("#chatbox").empty();
        var bean = chatRecordMap.get(id);
        if(bean != undefined){
            for(var i =0 ; i<bean.length; i++){
                var type = bean[i].type;
                var msg = bean[i].msg;
                var nickName = bean[i].nickName;
                var talkElement = "";
                if(type == 'me'){
                    talkElement = '<li class="me"><img src="images/own_head.jpg" title="'+nickName+'"><span>'+msg+'</span></li>';
                }
                if(type == 'other'){
                    talkElement = '<li class="other"><img src="images/head/15.jpg" title="'+nickName+'"><span>'+msg+'</span></li>';
                }
                $("#chatbox").append(talkElement);
            }
        }
    }

    function newMessageBox() {
        var messageBoxHtml = '<div class=\"windows_body\"><div class=\"office_text\" style=\"height: 100%;\">' +
            '<ul class=\"content\" id=\"chatbox\"></ul></div></div>';
        $(".talk_window").append(messageBoxHtml);
    }
    function send(){
        var content = $("#input_box").val();

        if(content == ''){
            return false;
        }

        var messagePayLoad = {
            "sendType":"toUser",
            "to":getRealUserId(currentChatUserId),
            "from":meUserId,
            "messageContent":content,
        }

        console.log("发送消息 :"+JSON.stringify(messagePayLoad));

        webSocket.send(JSON.stringify(messagePayLoad));

        var chatRecordOnceBean = {
            "type":"me",
            "msg":content,
            "nickName":meUserId
        };

        var chatRecord = chatRecordMap.get(currentChatUserId);

        if(chatRecord == undefined){
            chatRecord = [];
            chatRecord.push(chatRecordOnceBean);
            chatRecordMap.set(currentChatUserId,chatRecord);
        }else{
            chatRecord.push(chatRecordOnceBean);
            chatRecordMap.set(currentChatUserId,chatRecord);
        }

        var talkElement = '<li class="me"><img src="images/own_head.jpg" title="'+meUserId+'"><span>'+content+'</span></li>';
        $("#chatbox").append(talkElement);

        //设置滚动条到最底部
        $("#chatbox").slimScroll({ scrollTo:  '9999999999px' });

        //设置task 元素颜色
        var talk = document.getElementById('talkbox');
        var text = document.getElementById('input_box');
        talk.style.background="#fff";
        text.style.background="#fff";

        //清空输入框
        $("#input_box").val("");
        console.log("当前的聊天记录为 : " + chatRecordMap);
    }
    function stopDefaultKey(e){
        if(e && e.preventDefault){
            e.preventDefault();
        }else{
            window.event.returnValue = false;
        }
        return false;
    }
</script>
</body>
</html>
